<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <!-- 基本信息表单 -->
                    <el-form :model="formData" ref="formRef" label-width="120px" class="edit-form">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="领料编码" prop="requisitionCode">
                                    <el-input v-model="formData.requisitionCode" placeholder="领料编码" :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="领料名称" prop="requisitionName">
                                    <el-input v-model="formData.requisitionName" placeholder="请输入领料名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="需求日期" prop="requiredTime">
                                    <el-date-picker v-model="formData.requiredTime" type="datetime" placeholder="选择日期"
                                        value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="计划编码" prop="planCode">
                                    <el-input v-model="formData.planCode" placeholder="请输入计划编码" :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划名称" prop="planName">
                                    <el-input v-model="formData.planName" placeholder="请输入计划名称" :disabled="true" />
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="客户编号" prop="customerResourcesId">
                                    <el-input v-model="formData.customerResourcesId" placeholder="客户编号"
                                        :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户名称" prop="customerResourcesName">
                                    <el-input v-model="formData.customerResourcesName" placeholder="客户名称"
                                        :disabled="true" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="领料状态" prop="status">
                                    <el-select v-model="formData.status" placeholder="领料状态" style="width: 100%"
                                        :disabled="false">
                                        <el-option v-for="item in getStatusTagType" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </template>

            <!-- 物料信息表格 -->
            <div class="material-table">
                <div class="table-header">
                    <span class="title">物料清单</span>
                </div>

                <el-table :data="materialData" border stripe style="width: 100%" class="data-table">
                    <el-table-column prop="materialId" label="物料编码" />
                    <el-table-column prop="materialName" label="物料名称" />
                    <el-table-column prop="specificationsAndModels" label="规格型号" />
                    <el-table-column prop="unit" label="单位" width="80" />
                    <el-table-column prop="planQuantity" label="计划数量" />
                    <!-- <el-table-column prop="inventoryQuantity" label="库存数量" /> -->
                    <el-table-column prop="actualQuantity" label="实发数量" width="180">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.actualQuantity" :min="0"
                                :max="scope.row.planQuantity" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="warehouseId" label="仓库" width="150">
                        <template #default="scope">
                            <el-select v-model="scope.row.warehouseId" placeholder="请选择仓库" style="width: 100%">
                                <el-option v-for="item in warehouseOptions" :key="item.warehouseId"
                                    :label="item.warehouseName" :value="item.warehouseId"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 表单操作按钮 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm">保存修改</el-button>
            </el-form-item>
        </el-card>

        <!-- 添加物料弹窗 -->
        <el-dialog title="添加物料" v-model="materialDialogVisible" width="60%">
            <el-table :data="materialFormData.records" border stripe style="width: 100%" class="data-table" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="materialId" label="物料编码" />
                <el-table-column prop="materialName" label="物料名称" />
                <el-table-column prop="specificationsAndModels" label="规格型号" />
                <el-table-column prop="unit" label="单位" width="80" />
                <!-- <el-table-column prop="planQuantity" label="计划数量" />
                <el-table-column prop="inventoryQuantity" label="库存数量" />
                <el-table-column prop="actualQuantity" label="实发数量" width="180">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.actualQuantity" :min="0"
                            :max="scope.row.inventoryQuantity" />
                    </template>
                </el-table-column>
                <el-table-column prop="warehouseId" label="仓库" width="150">
                    <template #default="scope">
                        <el-select v-model="scope.row.warehouseId" placeholder="请选择仓库" style="width: 100%">
                            <el-option v-for="item in warehouseOptions" :key="item.warehouseId"
                                :label="item.warehouseName" :value="item.warehouseId"></el-option>
                        </el-select>
                    </template>
                </el-table-column> -->
            </el-table>
             <!-- 分页组件 -->
            <el-pagination @current-change="loadMaterialData" v-model:currentPage="materialFormData.current" :page-sizes="[2, 4, 6, 8, 10]"
                :page-size="materialFormData.size" :total="materialFormData.total" background>
            </el-pagination>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addMaterialData">保存</el-button>
                <el-button @click="materialDialogVisible = false">取消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';
import request from '@/api/request.js'
import { useRouter } from 'vue-router'

const router = useRouter()

let emits = defineEmits(['ref-table'])

let props = defineProps(["data"])

// 表单数据
const formData = ref({
    ...props.data
})

// 获取状态标签样式
const getStatusTagType = [
    { value: 0, label: '待领取' },
    { value: 1, label: '已领取' },
    { value: 2, label: '已取消' },
]

// 物料数据
const materialData = ref([])

// 仓库选项
const warehouseOptions = ref([])

const loadData = () => {
    request({
        url: '/material-requisition/getMaterialByCode',
        method: 'get',
        params: {
            requisitionCode: props.data.requisitionCode
        }
    }).then(res => {
        materialData.value = res.data
        request({
            url: '/warehouse/tree',
            method: 'get'
        }).then(res => {
            warehouseOptions.value = res.data
        })
    })
}

loadData()

let addMaterial = () => {
    // ElMessage.error('暂不支持添加物料')
    materialDialogVisible.value = true
}

// 表单提交
let submitForm = () => {
    formData.value.materialRequisitionDetails = materialData.value;
    request({
        url: '/material-requisition/update',
        method: 'put',
        data: formData.value
    }).then(res => {
        console.log(formData.value)
        if (res.code === 200) {
            alert("修改成功")
            emits("ref-table")
        } else {
            alert("修改失败")
        }
        router.push('/production/material')
        emits("ref-table")
    })
    // request({
    //     url:'/material-requisition/'+formData.requisitionId,
    //     method:'put',
    //     data:materialData.value
    // }).then(res => {
    //     console.log(res)
    // })
}

const materialFormData = ref({
    current: 1,    // 当前页码
    size: 5,      // 每页显示条数
    total: 0,      // 总条数
    records: []    // 当前页数据
})// 添加物料弹窗数据



const loadMaterialData = () => {
    // 构造查询参数
    const params = {
        current: materialFormData.value.current,
        size: materialFormData.value.size,
        ...formData.value
    }
    request({
        url: '/material/index',
        method: 'get',
        params
    }).then(res => {
        materialFormData.value = res.data
    })
}
loadMaterialData()

const rowSelection = ref([])

// 处理行选中
const handleSelectionChange = (val) => {
    rowSelection.value = val
}

let addMaterialData = () => {
    // 选中的行数据
    const selectData = rowSelection.value[0]
    // 物料数据中已存在该物料，则数量累加
    const index = materialData.value.findIndex(item => item.materialId === selectData.materialId)
    if (index !== -1) {
        materialData.value[index].actualQuantity += selectData.actualQuantity
    } else {
        // 否则新增行数据
        materialData.value.push(selectData)
    }
    // 关闭弹窗
    materialDialogVisible.value = false
}


let materialDialogVisible = ref(false) 
</script>

<style scoped></style>